<template>
  <div class="homebg">
    <h3>首页 \ home</h3>
    <div ref="chart" :style="size" style="overflow: visible;"></div>
    <div class="homearea" style="width: 20%;">
      <ul>
        <li>
          <dl>
            <dt>授牌示范区</dt>
            <dd><b class="f32" id="shifanqu">
              <countTo :startVal='experimentArea' :endVal='experimentAreaNum' :duration='500'></countTo>
            </b> 个</dd>
          </dl>
        </li>
        <li class="bg2">
          <dl>
            <dt>授牌学校</dt>
            <dd><b class="f32" id="zhaopaixuexiao">
              <countTo :startVal='experimentSchool' :endVal='experimentSchoolNum' :duration='500'></countTo>
            </b> 所</dd>
          </dl>
        </li>
        <li class="bg3">
          <dl>
            <dt>授牌示范学校</dt>
            <dd><b class="f32" id="shifanxuexiao">
              <countTo :startVal='standoutSchool' :endVal='standoutSchoolNum' :duration='500'></countTo>
            </b> 所</dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import '../../utils/china'
import { mapGetters } from 'vuex'
import countTo from 'vue-count-to'
import { getMapList } from '../../api/map'
export default {
  name: 'index',
  components: { countTo },
  data () {
    return {
      experimentArea: 0,
      experimentAreaNum: 0,
      experimentSchool: 0,
      experimentSchoolNum: 0,
      standoutSchool: 0,
      standoutSchoolNum: 0,
      chartOptions: {},
      size: {
        height: document.documentElement.clientHeight - 80 + 'px',
        width: document.documentElement.clientWidth - 350 + 'px'
      }
    }
  },
  methods: {
    chartMouseover (params) {
      this.experimentArea = this.experimentAreaNum
      this.experimentAreaNum = params.data.value[0]
      this.experimentSchool = this.experimentSchoolNum
      this.experimentSchoolNum = params.data.value[1]
      this.standoutSchool = this.standoutSchoolNum
      this.standoutSchoolNum = params.data.value[2]
    },
    flashMap () {
      getMapList().then((res) => {
        this.chartOptions.series[0].data = res.data.mapList
        this.echarts.init(this.$refs['chart']).setOption(this.chartOptions)
        this.$nextTick(function () { this.echarts.init(this.$refs['chart']).resize() })
      })
    }
  },
  mounted () {
    this.$store.dispatch('setRoute', this.$route.path)
    this.chartOptions = {
      layoutCenter: ['40%', '50%'],
      layoutSize: '120%',
      series: [{
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: [],
        itemStyle: {
          normal: {
            borderColor: '#A2ACC7',
            areaColor: '#E2EBF3'
          },
          emphasis: {
            areaColor: '#78CFA2',
            borderColor: '#05B55A',
            color: '#fff',
            borderWidth: 0,
            show: false
          }
        }
      }]
    }
    this.echarts.init(this.$refs['chart']).setOption(this.chartOptions)
    this.echarts.init(this.$refs['chart']).on('mouseover', this.chartMouseover)
    this.flashMap()
  },
  computed: {
    ...mapGetters([
      'height',
      'width',
      'side'
    ])
  },
  watch: {
    height: function (val) {
      this.size.height = val - 80 + 'px'
      this.$nextTick(function () { this.echarts.init(this.$refs['chart']).resize() })
    },
    width: function (val) {
      this.size.width = val - 350 + 'px'
      this.$nextTick(function () { this.echarts.init(this.$refs['chart']).resize() })
    },
    side: function (val) {
      if (val) {
        this.size.height = document.documentElement.clientHeight - 80 + 'px'
        this.size.width = document.documentElement.clientWidth - 350 + 'px'
        this.$nextTick(function () { this.echarts.init(this.$refs['chart']).resize() })
      } else {
        this.size.width = document.documentElement.clientWidth + 'px'
        this.$nextTick(function () { this.echarts.init(this.$refs['chart']).resize() })
      }
    }
  }
}
</script>

<style scoped>

</style>
